<template>
    <div>
        <div id="container"></div>
    </div>
</template>

<script>
import G6 from "@antv/g6";
import axios from "axios";

export default {
    name: "",
    data () {
        return {
            graph: null
        };
    },
    watch: {
    },
    computed: {
    },
    methods: {
        async initGraph () {
            const minimap = new G6.Minimap({
                size: [100, 100],
                className: "minimap",
                type: "delegate"
            });
            const grid = new G6.Grid();

            this.graph = new G6.Graph({
                container: "container",
                width: 1200,
                height: 600,
                plugins: [minimap, grid],
                layout: {
                    type: "force",
                    preventOverlap: true,
                    linkDistance: 100
                },
                modes: {
                    default: [
                        "drag-canvas",
                        "zoom-canvas",
                        "drag-node",
                        {
                            type: "tooltip",
                            formatText (model) {
                                const text = "label: " + model.label + "<br/> class: " + model.class;
                                return text;
                            }
                        },
                        {
                            type: "edge-tooltip",
                            formatText (model) {
                                const text = `source: ${model.source}<br/>
                                    target: ${model.target}<br/>
                                    weight: ${model.weight}`;
                                return text;
                            }
                        }
                    ],
                    edit: []
                },
                defaultNode: {
                    size: 30,
                    labelCfg: {
                        style: {
                            fill: "#fff"
                        }
                    }
                },
                defaultEdge: {
                    labelCfg: {
                        autoRotate: true
                    }
                },
                nodeStateStyles: {
                    hover: {
                        fill: "lightsteelblue"
                    },
                    click: {
                        stroke: "#000",
                        lineWidth: 3
                    }
                },
                edgeStateStyles: {
                    click: {
                        stroke: "steelblue"
                    }
                }
            });

            const data = await axios.get("https://gw.alipayobjects.com/os/basement_prod/6cae02ab-4c29-44b2-b1fd-4005688febcb.json");
            const nodes = data.data.nodes;
            const edges = data.data.edges;

            nodes.forEach(node => {
                if (!node.style) {
                    node.style = {};
                }
                node.style.lineWidth = 1;
                node.style.stroke = "#666";
                node.style.fill = "steelblue";

                switch (node.class) {
                case "c0":
                    node.type = "circle";
                    break;
                case "c1":
                    node.type = "rect";
                    node.size = [35, 20];
                    break;
                case "c2":
                    node.type = "ellipse";
                    node.size = [35, 20];
                    break;
                }
            });

            edges.forEach(edge => {
                if (!edge.style) {
                    edge.style = {};
                }
                edge.style.lineWidth = edge.weight;
                edge.style.opacity = 0.6;
                edge.style.stroke = "grey";
            });

            this.addEvent();

            this.graph.data(data.data);
            this.graph.render();
        },
        // 监听事件
        addEvent () {
            this.graph.on("node:mouseenter", e => {
                const nodeItem = e.item;
                this.graph.setItemState(nodeItem, "hover", true);
            });

            this.graph.on("node:mouseleave", e => {
                const nodeItem = e.item;
                this.graph.setItemState(nodeItem, "hover", false);
            });

            this.graph.on("node:click", e => {
                // 先将所有当前是click状态的节点置为非click状态
                const clickNodes = this.graph.findAllByState("node", "click");
                clickNodes.forEach(cn => {
                    this.graph.setItemState(cn, "click", false);
                });
                const nodeItem = e.item;
                this.graph.setItemState(nodeItem, "click", true);
            });

            this.graph.on("edge:click", e => {
                // 先将所有当前是click状态的边置为非click状态
                const clickEdges = this.graph.findAllByState("edge", "click");
                clickEdges.forEach(ce => {
                    this.graph.setItemState(ce, "click", false);
                });
                const edgeItem = e.item;
                this.graph.setItemState(edgeItem, "click", true);
            });
        }
    },
    created () {},
    mounted () {
        this.initGraph();
    }
};
</script>

<style scoped>
/deep/ .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgba(174, 174, 174) 0px 0px 10px;
}
</style>
